본문 바로가기

퍼블리싱/Codepen | 그 외

(54)
hover 영역만 스포트라이트(?)같은 효과 Magical Hover Effect (w/ Tutorial) https://codepen.io/Hyperplexed/pen/MWQeYLW See the Pen Magical Hover Effect (w/ Tutorial) by Hyperplexed (@Hyperplexed) on CodePen.
GSAP ScrollTrigger - Demo 회사 홈페이지 만들때 쓰긴 썼지만 어려운 ㅠㅠ scrolltrigger https://codepen.io/noeldelgado/pen/BaogqYy See the Pen GSAP ScrollTrigger - Demo by Noel Delgado (@noeldelgado) on CodePen.
The aurora (only CSS) 텍스트에 그라데이션 효과가 움직이는듯한 css https://codepen.io/ostylowany/pen/vYzPVZL See the Pen 🌌 The aurora (only CSS) by Ostylowany (@ostylowany) on CodePen.
swiper slide 효과 스와이핑 할때 효과가 괜찮은듯. https://codepen.io/TurkAysenur/pen/gORaboY See the Pen Product Showcase UI by Aysenur Turk (@TurkAysenur) on CodePen.
Simple CSS Waves https://codepen.io/goodkatz/pen/LYPGxQz See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.
Animated Continuous Sections with GSAP Observer 스크롤 다운 할때 글자가 하나씩 나타나는듯한 효과. 예쁨 https://codepen.io/GreenSock/pen/XWzRraJ See the Pen Animated Continuous Sections with GSAP Observer by GreenSock (@GreenSock) on CodePen.
CodePen HomeNeumorphic Elements https://codepen.io/myacode/pen/PoqQQNM See the Pen Neumorphic Elements by Maria Marin (@myacode) on CodePen.
glowy hover effect https://codepen.io/inescodes/pen/PoxMyvX See the Pen glowy hover effect by Ines (@inescodes) on CodePen.
구름 흘러가는 효과 only css 이것도 4년전 프로젝트때 수정해서 사용한 소스! https://codepen.io/mghayour/pen/AxWBYW See the Pen Cloudy Sky by mghayour (@mghayour) on CodePen.
눈 내리는 효과 javascript 4년전에 프로젝트 할때 화면 백그라운드에 눈 내리는 효과 넣어야 할때 쓴 코드. 예전 프로젝트 살펴보다가 찾았는데 나름 괜찮았던듯. https://codepen.io/loktar00/pen/njPvwM See the Pen Its snowing! by Loktar (@loktar00) on CodePen. 이 소스를 기반으로 나는 스크립트를 조금 수정해서 아래와 같이 썼다. (마우스오버시 눈덩이 피하는것 같은 효과 빼고 개수 줄이고 등등) (function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || wi..
mouse over시 설명 텍스트가 따라다니는 갤러리 https://codepen.io/kathykato/pen/KRQOKY 직접 링크 들어가서 확인 필요 See the Pen Gallery by Katherine Kato (@kathykato) on CodePen.
마우스커서 따라다니는 도형 + overlay 효과 https://codepen.io/ig_design/pen/VgaXaY 이건 직접 링크로 들어가서 봐야 커서가 제대로 작동함. See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.
센스있는 go 버튼 https://codepen.io/kathykato/pen/rZRaNe 사람들이 많이 좋아요 누른 펜은 이유가 있다! See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.
hover slide https://codepen.io/ig_design/pen/MRbJWW See the Pen Hover slider (dark/light) - ver 3 by Ivan Grozdic (@ig_design) on CodePen.
감각적인 card hover https://codepen.io/hexagoncircle/pen/XWbWKwL See the Pen Card Hover Interactions by Ryan Mulligan (@hexagoncircle) on CodePen.
클릭한 카드만 띄우기 + detail 보이기 https://codepen.io/candroo/pen/wKEwRL See the Pen 3D Fold out reveal by Andrew Canham (@candroo) on CodePen.
gradient buttons https://codepen.io/pirrera/pen/bqVeGx See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.
css hover effects https://codepen.io/honglio/pen/kWXXvj See the Pen CSS3 Hover Effects by honglio (@honglio) on CodePen.
기본적인 responsive table https://codepen.io/geoffyuen/pen/DZxEKy See the Pen Responsive Table by Geoff Yuen (@geoffyuen) on CodePen.
텍스트 나타나는 효과 https://codepen.io/Sonick/details/AwXJdM See the Pen CSS3 Text Animation Effect by Nick Mkrtchyan (@Sonick) on CodePen.

728x90